<!--
 * @Description: 
 * @Author: liutq
 * @Date: 2022-09-13 20:50:00
 * @LastEditTime: 2022-09-16 12:00:21
 * @LastEditors: liutq
 * @Reference: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个正经的聊天软件</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <header>
        <div class="left">
            <img class="portrait" src="./img/头像.jpeg">
            <div class="message">
                <h3 class="name">风离</h3>
                <p class="slogan">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
            </div>
        </div>

        <span class="right" style="font-size: 30px">设置</span>
    </header>
    <div class="content-box">
        <!-- aside是侧边栏 -->
        <aside>
            <button class="choice-btn active">消息</button>
            <button class="choice-btn">好友</button>
            <button class="choice-btn">收藏</button>
            <button class="choice-btn">更多</button>
        </aside>
        <main>
            <div class="chat-list">
                <div class="search">
                    <input type="text" placeholder="搜索">
                </div>
                <div class="list">
                    <ul>
                        <li class="list-active">
                            <img class="portrait" src="./img/聊天1.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">程序员</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天2.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">哆啦A梦</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天3.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">鸡哥</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天4.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">Tom</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天5.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">面色和善的大哥</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>
                        <li>
                            <img class="portrait" src="./img/聊天6.jpg">
                            <div class=" chat-object">
                                <div class="chat-header">
                                    <h3 class="name">不善言辞</h3>
                                    <span class="secondary-text">10:11</span>
                                </div>
                                <p class="secondary-text">这个bug什么时候改</p>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="chat-page">
                <div class="object-info">
                    <div class="info">
                        <img class="portrait" src="./img/聊天1.jpg">
                        <h2 class="name">程序员</h2>
                    </div>
                    <div class="tool">
                        <span class="icon">图标1</span>
                        <span class="icon">图标2</span>
                        <span class="icon">图标3</span>
                    </div>
                </div>
                <div class="chat"></div>
                <div class="send">
                    <div class="setting">
                        <span>图标1</span>
                        <span>图标2</span>
                        <span>图标3</span>

                    </div>
                    <textarea class="content" name="" id="" cols="30" rows="10"></textarea>
                    <button class="go">发送💖</button>
                </div>
            </div>
        </main>
    </div>
</body>

</html>
